<template>
  <!-- PV 折线图容器 -->
  <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { watch } from 'vue'

// 对外暴露的属性值
const props = defineProps({
  value: {
    type: Object,
    default: null
  }
})

// 初始化折线图
function initLineChat() {
  var chartDom = document.getElementById('lineChat');
  var myChart = echarts.init(chartDom);
  var option;

  // 从props.value中获取日期集合和pv访问量集合
  const pvDates = props.value.pvDates
  const pvCounts = props.value.pvCounts

  option = {
      xAxis: {
          type: 'category',
          data: pvDates // x轴数据
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              data: pvCounts, // 设置pv访问量
              type: 'line'
          }
      ]
  };

  // 开启tooltip提示  鼠标移动到折点上，显示数值
  option.tooltip = { trigger: 'axis' }

  option && myChart.setOption(option);
}

// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initLineChat 初始化折线图
watch(() => props.value, () => initLineChat())

</script>